<template>
    <!-- 查询权益卡 -->
    <div class="draw-main">
      <div class="h-main">
        <div class="h-form">
            <div class="h-label"><span class="h-spacing">姓名</span> FULL NAME</div>
            <el-input v-model='name' class='h-input'/>
            <div class="h-label" style="margin-top:15px;"><span class="h-spacing">身份证</span> ID</div>
            <el-input v-model='idcard' class='h-input'/>
        </div>
         <div class="card-button-border" @click='toQuery'>查询</div>
      </div>
    </div>
  </template>
  
  <script>
    import cardApi from '@/api/h5/card'
    export default {
      data() {
        return {
            name:'',
            idcard:''
        };
      },
      created(){
        document.title = '查询权益卡';
      },
      methods: {
        toQuery(){
            var params = {
                name: this.name,
                idcard: this.idcard
            }
            // if(this.name == ''){
            //     this.$toast('未查询到该权益卡')
            // }
            this.$toast.loading({
                message: '查询中...',
                forbidClick: true,
                loadingType: 'spinner',
            });
            cardApi.getCardInfo(params).then(res => {
                console.log(res)
                this.$toast.clear();
                if(res.data.length == 0){
                    this.$toast('未查询到该权益卡')
                }else{
                    localStorage.setItem("cardInfo",JSON.stringify(res.data[0]))
                    this.$router.push('queryRes')
                }
            })
        },
        
      },
    }
</script>
<style scoped>
.draw-main{
    justify-content: center;
    height: 100%;
} 

</style>